import { Input } from "antd";
import { useEffect, useState } from "react";
import { useDashboardBreadcrumbContext } from "@/providers/DashboardBreadcrumbProvider";
import ListIcon from "@/assets/icons/list.svg?jsx";
import ChunkItem from "./ChunkItem";
import ChunkEditModal from "./ChunkEditModal";

export default function DatasetDetail() {
  const { push, pop, update } = useDashboardBreadcrumbContext();
  const [chunkEditModal, setChunkEditModal] = useState({
    visible: false,
    chunk: null,
  });

  function handleEditChunk(chunk: any) {
    setChunkEditModal({ visible: true, chunk });
  }
  useEffect(() => {
    push({ title: "-" });

    setTimeout(() => {
      update({ title: "阿三大苏打" });
    }, 1000);
    return pop;
  }, []); // eslint-disable-line

  const list = [{ id: 1 }, { id: 2 }];

  return (
    <>
      <div className="h-full pt-4">
        <div className="flex items-center">
          <ListIcon />
          <span className="ml-2 text-xs">共 26 个分块</span>
          <Input.Search className="ml-auto w-60" />
        </div>
        <div className="mt-4">
          {list.map((chunk) => (
            <ChunkItem key={chunk.id} chunk={chunk} onEdit={handleEditChunk} />
          ))}
        </div>
      </div>
      <ChunkEditModal
        visible={chunkEditModal.visible}
        onVisibleChange={() =>
          setChunkEditModal({ visible: false, chunk: null })
        }
      />
    </>
  );
}
